<template>
  <AppWrapper content-class="flex-col">
    <div class="flex">
      <div class="flex-1 flex flex-col">
        <div class="hd flex items-center mb-3">
          <div class="tit text-[24px] font-black flex items-center">
            <span>图书详情</span>
            <img src="@/assets/wide/header2-sp.png" class="ml-2" alt="" />
          </div>
        </div>
        <a class="item relative py-8 px-10 bg-white/80 flex cursor-pointer">
          <div class="thumb w-[170px] mr-8">
            <div
              class="book-cover"
              style="background-image: url(https://placeimg.com/300/200/tech)"
            ></div>
          </div>
          <div class="content flex-auto">
            <div class="hd mb-4 -mt-1">
              <span class="tag mr-1 text-brand text-sm">[图书]</span>
              <span class="tit font-bold"
                >Lorem ipsum dolor sit amet, consectetur.</span
              >
            </div>
            <dl class="meta">
              <div>
                <dt>责任者：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>创作时间：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>创作地点：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>内容：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
            </dl>
          </div>
        </a>
      </div>

      <div class="flex-1 ml-[60px] flex">A</div>
    </div>
  </AppWrapper>
</template>

<style lang="less" scoped>
.card {
  @apply bg-white rounded overflow-hidden;
}
</style>
